<!--
 * @description: 新增提现明细按钮
 * @Author: latiao
 * @Date: 2021-11-10 14:36:19
 * @LastEditors: latiao
 * @LastEditTime: 2022-04-21 17:09:35
-->
<template>
  <div class="customer">
    <m-card class="form" :needToggle="true">
      <el-form class="customer__dataForm" ref="dataFormRef" :model="dataForm" label-width="100px">
        <el-row :gutter="40">
          <el-col :span="10">
            <el-form-item label="微信昵称">
              <el-input
                v-model="dataForm.nikeName"
                clearable
                placeholder="请输入会员昵称"
                @keyup.enter="getDataList"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="标  签">
              <el-select
                v-model="dataForm.tagId"
                placeholder="请选择标签"
                style="width: 256px"
                clearable
              >
                <el-option label="全部" :value="null" />
                <el-option
                  v-for="tag in allTagList"
                  :key="tag.tagId"
                  :label="tag.tagName"
                  :value="tag.tagId"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="40">
          <el-col :span="10">
            <el-form-item label="上次交易时间">
              <el-date-picker
                v-model="dataForm.orderSuccessTime"
                :default-time="['00:00:00', '23:59:59']"
                value-format="yyyy-MM-dd HH:mm:ss"
                style="width: 256px"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="成为会员时间">
              <el-date-picker
                v-model="dataForm.becomeMemberTime"
                :default-time="['00:00:00', '23:59:59']"
                value-format="yyyy-MM-dd HH:mm:ss"
                style="width: 256px"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="40">
          <el-col :span="10">
            <el-form-item label="会员等级">
              <el-select v-model="dataForm.rankCode" style="width: 256px" placeholder="选择会员等级">
                <el-option label="全部" :value="null" />
                <el-option
                  v-for="(item, index) in rankOptions"
                  :key="index"
                  :label="`${item.rankName}(LV${item.rankCode})`"
                  :value="item.rankCode"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="会员卡号">
              <el-input
                v-model="dataForm.memberNumber"
                style="width: 256px"
                clearable
                placeholder="请输入会员卡号"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-button type="primary" style="margin-left:100px" @click="handleCurrentChange(1)">搜索</el-button>
      </el-form>
    </m-card>
    <el-row class="customer__filterForm" type="flex" justify="space-between">
      <el-col :span="4">
        <set-drop
          setName="赠送优惠券"
          :dropdownList="couponDropList"
          @setClick="batchCouponClick"
          @command="batchCouponCommand"
        />
      </el-col>
      <el-col :span="4">
        <el-select
          v-model="dataForm.sortType"
          placeholder="请选择排序方式"
          @change="handleCurrentChange(1)"
        >
          <el-option
            v-for="item in sortOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-col>
    </el-row>

    <m-table
      :data.sync="dataList"
      :selection="true"
      :checked-item.sync="multipleSelection"
      slot="content"
      needHoverBorder
      ref="customerListRef"
      class="customerList"
    >
      <template v-slot:header="{ row }">
        <div style="width: 100%" v-if="!!row.memberNumber">
          <span style="margin-right: 50px">会员卡号：{{ row.memberNumber }}</span>
          <span>成为会员时间:{{ row.memberRegisterTime }}</span>
          <span>(已成为会员{{ row.becomeMemberDayNumber }}天)</span>
          <span style="padding-left: 15px">成为用户时间:{{ row.firstLoginTime }}</span>
        </div>
        <div style="width: 100%" v-else>
          <span>成为用户时间:{{ row.firstLoginTime }}</span>
        </div>
      </template>
      <m-table-column prop="userName" label="客户信息" :showsSlection="true" width="200">
        <template v-slot="{ row }">
          <div class="info">
            <img class="info__img" :src="row.avatarUrl" alt />
            <div class="info__msg">
              <div class="info__msg--text">
                <div style="width: 350px">{{ row.nikeName }}</div>
                <div v-if="row.phone" style="width: 300px">({{ row.phone }})</div>
              </div>
              <div class="info__msg--tags">
                <span
                  v-if="row.userTagVos !== null && row.userTagVos.length > 0"
                  @click="setLabel(row)"
                  class="pointer"
                >
                  <el-button type="text">
                    {{
                    row.userTagVos
                    .map(tag => tag.tagName)
                    .slice(0, 2)
                    .join(" ; ")
                    }}
                  </el-button>
                  <span>等共{{ row.userTagVos.length }}个标签</span>
                </span>
                <el-button
                  type="text"
                  @click="setLabel(row)"
                  v-if="
                    row.userTagVos === null ||
                      (row.userTagVos !== null && row.userTagVos.length === 0)
                  "
                >请选择所属标签</el-button>
                <i class="el-icon-caret-bottom pointer" @click="setLabel(row)" />
              </div>
            </div>
          </div>
        </template>
      </m-table-column>
      <m-table-column prop="userName" label="分销订单">
        <template v-slot="{ row }">
          <span>{{ row.orderCount }}</span>
        </template>
      </m-table-column>
      <m-table-column prop="userName" label="交易总额">
        <template v-slot="{ row }">
          <span>{{ row.consumeTotleMoney }}</span>
        </template>
      </m-table-column>
      <m-table-column prop="userName" label="所属分销商" width="120">
        <template v-slot="{ row }">
          <div>
          <span>{{ row.firstNickName }}</span><br />
          {{ (row.firstPhone )}}
          </div>
        </template>
      </m-table-column>
      <m-table-column prop="userName" label="可用余额" width="150">
        <template v-slot="{ row }">
          <div>
          <span>当前余额：{{ row.supplyBonus}}</span><br />
          累计佣金：{{ row.firstDistributionAmount}}
          </div>
        </template>
      </m-table-column>
      <m-table-column prop="userName" label="上次交易时间" width="160">
        <template v-slot="{ row }">
          <span>{{ row.orderLastDealTime }}</span>
        </template>
      </m-table-column>
      <m-table-column prop="userName" label="操作" width="150">
        <template v-slot="{ row }">
          <set-drop
            setName="赠送优惠券"
            :dropdownList="dropdownList(row)"
            @setClick="itemClick(row)"
            @command="itemCommand($event, row)"
            @click="test"
          />
        </template>
      </m-table-column>
    </m-table>
    <PageManage
      :pageSize="pageSize"
      :pageNum="pageNum"
      :total="total"
      class="PageManage"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    />
    <give-coupons
      :visible.sync="couponVisible"
      :checked-item="selectionList"
      @refreshDataList="getDataList()"
    />
    <charge-integral
      :visible.sync="chargeVisible"
      :checked-item="selectionList"
      @refreshDataList="getDataList()"
    />
    <integral-detail
      :visible.sync="detailVisible"
      :checked-item="selectionList"
      @refreshDataList="getDataList()"
    />
    <BalanceDetail
      :visible.sync="balanceVisible"
      :checked-item="selectionList"
      @refreshDataList="getDataList()"
    />
    <WithdrawalDetail
      :visible.sync="WithdrawalVisible"
      :checked-item="selectionList"
      @refreshDataList="getDataList()"
    />
    <black-list ref="blackListDialogRef" v-if="blackListVisible" @refreshDataList="getDataList" />
    <set-label
      ref="labelDialogRef"
      v-if="labelVisible"
      :allTags="allTagList"
      @refreshDataList="getDataList()"
    />
    <set-label
      ref="labelDialogRef"
      v-if="labelVisible"
      :allTags="allTagList"
      @refreshDataList="getDataList()"
    />
  </div>
</template>

<script lang="ts">
import { Vue, Component, Ref } from "vue-property-decorator";
import {
  getCustomerList,
  getAllTags,
} from "@/api/customer/customer";
import GiveCoupons from "./components/dialog/GiveCoupons.vue";
import ChargeIntegral from "./components/dialog/ChargeIntegral.vue";
import IntegralDetail from "./components/dialog/IntegralDetail.vue";
import PageManage from "@/components/PageManage.vue";
import BlackList from "../common/SetBlackList.vue";
import SetDrop from "@/views/customer/common/SetDrop.vue";
import SetLabel from "@/views/customer/list/components/dialog/SetTags.vue";
import BalanceDetail from "@/views/customer/list/components/dialog/BalanceDetail.vue";
import WithdrawalDetail from "@/views/customer/list/components/dialog/WithdrawalDetail.vue";
import { getMemberCardRankList } from "@/api/customer/member";

@Component({
  components: {
    PageManage,
    GiveCoupons,
    ChargeIntegral,
    IntegralDetail,
    BlackList,
    SetDrop,
    SetLabel,
    BalanceDetail,
    WithdrawalDetail,
  },
})
export default class Index extends Vue {

  @Ref()
  readonly dataFormRef;

  @Ref()
  readonly customerListRef;

  @Ref()
  readonly couponDialogRef;

  @Ref()
  readonly chargeDialogRef;

  @Ref()
  readonly blackListDialogRef;

  @Ref()
  readonly labelDialogRef;

  dataForm = {
    nikeName: null,
    becomeMemberTime: [],
    orderSuccessTime: [],
    memberNumber: null,
    rankCode: null,
    sortType: 1,
    tagId: null,
  };

  dataList = [];

  allTagList: any[] = [];

  selectionList = [];

  multipleSelection = [];

  couponVisible = false;

  chargeVisible = false;

  detailVisible = false;

  balanceVisible = false;

  WithdrawalVisible = false;

  managerVisible = false;

  blackListVisible = false;

  labelVisible = false;

  visible = true;

  sortOptions = [
    {
      value: 1,
      label: "按交易总额降序",
    },
    {
      value: 2,
      label: "按交易总额升序",
    },
    {
      value: 3,
      label: "按成为会员时间降序",
    },
    {
      value: 4,
      label: "按成为会员时间升序",
    },
  ];

  /** 赠送优惠券下拉菜单 */
  couponDropList: any[] = [
    {
      command: "设置标签",
      disabled: false,
      show: true,
      text: "设置标签",
    },
    {
      command: "积分充值",
      disabled: false,
      show: true,
      text: "积分充值",
    },
    // {
    //   command: "设为会员",
    //   disabled: false,
    //   show: true,
    //   text: "设为会员",
    // },
    {
      command: "加入黑名单",
      disabled: false,
      show: true,
      text: "加入黑名单",
    },
  ];

  rankOptions = [];

  /** 分页条数 */
  pageSize = 10;

  /** 分页页码 */
  pageNum = 1;

  /** 数据长度 */
  total = 0;


  created() {

  }

  mounted() {
    this.getDataList();
    this.getRank();
  }

  /**
   * 获取用户列表
   */
  getDataList() {
    const form = this.dataForm;
    const param = {
      page: this.pageNum,
      size: this.pageSize,
      sort: form.sortType,
      memberNumber: form.memberNumber,
      rankCode: form.rankCode,
      nikeName: form.nikeName,
      tagId: form.tagId,
      becomeMemberStartTime:
        form.becomeMemberTime !== null ? form.becomeMemberTime[0] : "",
      becomeMemberEndTime:
        form.becomeMemberTime !== null ? form.becomeMemberTime[1] : "",
      orderSuccessStartTime:
        form.orderSuccessTime !== null ? form.orderSuccessTime[0] : "",
      orderSuccessEndTime:
        form.orderSuccessTime !== null ? form.orderSuccessTime[1] : "",
    };
    getCustomerList(param).then(res => {
      this.dataList = res.data.list;
      this.pageSize = res.data.size;
      this.pageNum = res.data.current;
      this.total = res.data.total;
    });
    this.getTags();
  }

  /**
   * @method getTags
   * @description 获取所有标签
   */
  getTags() {
    getAllTags().then(res => {
      this.allTagList = res.data;
    });
  }

  get dropdownList() {
    return row => {
      const communityShow = row.communityType === 0;
      // const pointInfoShow = !row.pointFlag;
      /** 操作项下拉菜单 */
      const drownList = [
        {
          command: "余额明细",
          disabled: false,
          show: true,
          text: "余额明细",
        },
        {
          command: "提现明细",
          disabled: false,
          show: true,
          text: "提现明细",
        },
        {
          command: "积分充值",
          disabled: false,
          show: true,
          text: "积分充值",
        },
        {
          command: "积分明细",
          disabled: false,
          show: true,
          text: "积分明细",
        },
        {
          command: "加入黑名单",
          disabled: false,
          show: true,
          text: "加入黑名单",
        },
      ];
      return row.state == 2
        ? [
          {
            command: "加入会员",
            disabled: false,
            show: true,
            text: "加入会员",
          },
          ...drownList,
        ]
        : drownList;
    };
  }

  batchCouponClick() {
    if (this.multipleSelection.length > 0) {
      this.couponVisible = true;
      this.selectionList = this.multipleSelection;
    } else {
      this.$message.warning("至少选择一个客户");
    }
  }

  batchCouponCommand(command) {
    if (this.multipleSelection.length > 0) {
      switch (command) {
        case "设置标签":
          this.labelVisible = true;
          this.$nextTick(() => {
            this.labelDialogRef.init(this.multipleSelection);
          });
          break;
        case "加入黑名单":
          this.blackListVisible = true;
          this.$nextTick(() => {
            this.blackListDialogRef.init(this.multipleSelection, 1);
          });
          break;
        case "积分充值":
          this.chargeVisible = true;
          this.selectionList = this.multipleSelection;
          break;
      }
    } else {
      this.$message.info("请至少选择一个客户");
    }
  }

  itemClick(row) {
    this.couponVisible = true;
    this.selectionList = [row];
  }

  test() {
    console.log("1");
  }

  itemCommand(command, row) {
    switch (command) {
      case "加入会员":
        this.$router.push({
          name: "settingMember",
          params: {
            id: row.userId,
            nikeName: row.nikeName,
            img: row.avatarUrl,
          },
        });
        break;
      case "加入黑名单":
        this.blackListVisible = true;
        this.$nextTick(() => {
          this.blackListDialogRef.init([row], 1);
        });
        break;
      case "积分充值":
        this.chargeVisible = true;
        this.selectionList = [row];
        break;
      case "积分明细":
        this.detailVisible = true;
        this.selectionList = [row];
        break;
      case "余额明细":
        this.balanceVisible = true;
        this.selectionList = [row];
        break;
      case "提现明细":
        this.WithdrawalVisible = true;
        this.selectionList = [row];
        break;
    }
  }

  setLabel(row) {
    this.labelVisible = true;
    this.$nextTick(() => {
      this.labelDialogRef.init([row]);
    });
  }

  /**
   * @method handleSizeChange
   * @description 每页 条
   */
  handleSizeChange(val) {
    this.pageSize = val;
    this.pageNum = 1;
    this.getDataList();
  }

  /**
   * @method handleCurrentChange
   * @description 当前页
   */
  handleCurrentChange(val) {
    console.log(val)
    this.pageNum = val;
    this.getDataList();
  }

  // 等级下拉列表数据请求
  getRank() {
    getMemberCardRankList(null).then(res => {
      if (res.code === 200) {
        this.rankOptions = res.data || [];
      }
    });
  }
}
</script>

<style lang="scss" scoped>
@import "../../../assets/styles/cutomer/customer";
</style>
